<template>
	<zui-box>

		<!-- 头部导航 -->
		<zui-navbar title='订单详情'></zui-navbar>
		
		<u-gap height="30rpx"></u-gap>
		<zui-flat bgColor='#EEAE4F'>
			<!-- padding='30rpx' -->
			<zui-col height='174rpx' v-if="info&&info.state_list">
				<view class="col_text">{{info.state_list[info.state]}} </view>
				<view class="col_text">{{sm_state_list[info.state]}}</view>
			</zui-col>
		</zui-flat>
		<u-gap height="30rpx"></u-gap>
		

		<!-- //平面盒子 -->
		<zui-flat bgColor='#fff' v-if="address">
			<!-- //地址列表 -->
			<zui-address :name='address.name'
				:phone='address.phone'
			  :address="address.pro_name+'-'+address.city_name+'-'+address.area_name+'-'+address.address"
			  right='transparent'
			  >
			</zui-address>
		</zui-flat>

		<u-gap height="30rpx"></u-gap>
		
		<zui-flat bgColor='#fff'>
				<u-gap height="30rpx"></u-gap>
			<!-- <zui-orderTop padding='30rpx' title='中森珠宝' status='已发货'></zui-orderTop> -->
			<!-- 商品列表 -->
			
			<view class="list" v-if="good_list">
				<view class="item" v-for="(item,index) in good_list" :key="index">
					<!-- <zui-good
						:img='item.goods.goods_thumb' 
						:name='item.goods.goods_name'
						:price='item.goods_price'
						:cost='item.process_fee'
						:num='item.goods_num'>
					</zui-good>
					 -->
					<zui-good
						:img='item.goods.goods_thumb' 
						:name='item.goods.goods_name'
						:price='item.goods_price' 
						:cost='item.process_fee'
						:num='item.goods_num'
						:sku='item.specs.goods_specs'
						:is_fee='info.order_type!=4'
						>
					</zui-good>
					
					
				</view>
			</view>
			<zui-line padding='30rpx'></zui-line>
			<zui-both padding='10rpx'>
				<view class="both_name">运费</view>
				<view class="both_price">快递免邮</view>
			</zui-both>
		<!-- 	<zui-both padding='10rpx'>
				<view class="both_name">购物券</view>
				<view class="both_price">{{info.voucher_price}}</view>
			</zui-both> -->
			<zui-both padding='10rpx'>
				<view class="both_name">实际支付</view>
				<view class="all_price">￥{{Math.trunc(info.actual_price*1)}}</view>
			</zui-both>
			<u-gap height="30rpx"></u-gap>
		</zui-flat>
		
		<u-gap height="30rpx"></u-gap>
		<zui-flat bgColor='#fff'>
			<u-gap height="30rpx"></u-gap>
			<zui-start padding='15rpx' >
				<view class="start_name">订单编号：{{info.order_sn}}</view>
			</zui-start>
			<zui-start padding='15rpx' v-if="info&&info.pay_type_list">
				<!-- {{info.pay_type}} -->
				<view class="start_name">支付方式：{{info.pay_type_list[info.pay_type]}}</view>
			</zui-start>
			<zui-start padding='15rpx' v-if="info&&info.pay_time">
				<view class="start_name">支付时间：{{info.pay_time}}</view>
			</zui-start>
			<zui-start padding='15rpx' v-if="info&&info.delivery_company">
				<view class="start_name">快递公司：{{info.delivery_company}}</view>
			</zui-start>
			<zui-start padding='15rpx' v-if="info&&info.delivery_sn">
				<view class="start_name">快递单号：{{info.delivery_sn}}</view>
			</zui-start>
			<zui-start padding='15rpx' v-if="info&&info.delivery_time">
				<view class="start_name">发货时间：{{info.delivery_time}}</view>
			</zui-start>
			<u-gap height="30rpx"></u-gap>
		</zui-flat>
		
		<u-gap height="30rpx"></u-gap>
		
		<zui-flat  v-if="info.state==10" >
			<u-input type="digit" v-model="user_delivery_sn" @input="inputChange" placeholder="请输入快递单号" border="none" color="#fff" clearable></u-input>
		</zui-flat>
		
		<u-gap height="30rpx"></u-gap>
		
		
		<zui-foot bgColor='#fff' v-if="info.state==1|| info.state==50 || info.state==10">
			
			<zui-button v-if="info.state==1" @fun="to_pay">去支付</zui-button>
				<zui-button v-if="info.state==10" @fun="to_sell">确认寄送</zui-button>
			
			<zui-button bgColor='#858690' v-if="info.state==50" @fun="to_look" >查看物流</zui-button>
			
			<zui-button v-if="info.state==50" @fun="to_harvest" >确认收货</zui-button>
			
			
		</zui-foot>
		
		<u-gap height="140rpx"></u-gap>
		
		
		<u-modal :show="password_show" title="支付密码">
		
			<view class="slot-content">
				<u-gap height="30rpx"></u-gap>
				<u-input v-model="password" type="password" maxlength="6" shape="circle" placeholder="请输入确认支付密码"
					border="none" clearable color="#999">
				</u-input>
			</view>
		
			<view slot='confirmButton'>
				<zui-button @fun="balance_pay()">确认</zui-button>
			</view>
		
		</u-modal>
		
		
		
	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				order_id:'',
				info:'',
				address:'',
				sm_state_list:{
					'1':'该订单未付款',
					'10':'请填写快递单号',
					'20':'等待商家审核',
					'30':'等待买家验收',
					'40':'等待商家发货',
					'50':'等待买家收货',
					'60':'期待的宝贝已经收到啦',
					'70':'该订单已取消',
					'80':'您的支付被商家驳回',
					'90':'正在验收驳回中',
					},
				good_list:[],
				delivery:'',
				password_show:false,//密码支付
				password:'',//密码
				
				user_delivery_sn:'',
			};
		},
		//页面加载完毕
		onLoad(e) {
			console.log(e);
			this.order_id = e.order_id;
		
		},
		onShow() {
			this.get_info();
		},
		methods: {
			to_sell(){
				let that = this;
				
				if(!this.user_delivery_sn){
					return this.say('请输入发货快递单号')
				}
				// 寄送
				uni.$u.http.post('/app/order_goods/deliveryGoods', {
					order_id:that.order_id,
					user_delivery_sn:that.user_delivery_sn,
					user_delivery_image:''
					
				},{
					custom:{
						auth: true,
						toast: true,
						catch: true,
					}
				}
				
				).then(res => {
					
					that.get_info();
					uni.pageScrollTo({
									scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
									duration:300  // 滚动动画的时长
								})
								
				}).catch(err => {
					
				})
				
			},
			to_pay(){
				console.log('去支付’')
				uni.$u.route('pages/index/order_payment', {
					order_id: this.order_id,
				});
			},
			to_balance(){
				console.log('去支付’')
				// uni.$u.route('pages/index/bank_pay', {
				// 	order_id: this.order_id,
				// });
				this.password_show = true;
			},
			
			
			to_look(){
				uni.$u.route('pages/index/logistics', {
					order_id:this.order_id
				});
			},
			
			//按钮操作
			to_harvest(){
			let that = this;
				
					// this.show = true;
				
					uni.showModal({
						title: '确认收货',
						content: '请确保已经收到货物,并且货物完好',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							
								
								// 保存地址
								uni.$u.http.post('/app/order_goods/receiveGoods', {
									order_id:that.order_id,
									
								},{
									custom:{
										auth: true,
										toast: true,
										catch: true,
									}
								}
								
								).then(res => {
									
									that.get_info();
								}).catch(err => {
									
								})
								
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
			
			},
			get_info(){
				// 获取页面订单信息
				uni.$u.http.get('/app/order_goods/detail', {
					params: {
						order_id:this.order_id,
					},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}).then(res => {
					console.log('获取订单详情------------', res);
					this.info = res;
					this.address = res.address;
					this.good_list = res.subs;
					this.delivery = res.delivery;
					
					
				}).catch(err => {
							
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	
	/deep/.u-input__content__field-wrapper__field {
		height: 100rpx !important;
	}
	
	
	
	/deep/.btn_box{
		padding: 30rpx 15rpx !important;
	}

.col_text{
		color: #fff;
		font-size: 26rpx;
	}


.both_price{
	color: #FFE5A5;
}
.all_price{
	color:#E63A2A;
}


	// /deep/.u-popup__content {
	// 	background: #232539 !important;
	// }


	/deep/.zui-foot{
		height: 140rpx;
		padding: 0  15rpx !important;
	}

	/deep/.anBtn{
	height: 80rpx !important;
	line-height: 80rpx !important;
}
</style>
